<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <div>结果：<span id="postResult"></span></div>
    <input id="name" />
    <button id="postBtn">提交 post 请求</button>
    <script>
        const postResult = document.querySelector("#postResult");
        const name = document.querySelector("#name");
        const postBtn = document.querySelector("#postBtn");
        // new Xhr -> xhr.open ->xhr.setRequestHeader -> xhr.send -> xhr.onreadystatechange
        // 如果我要向后端传输数据 xhr.setRequestHeader 设置请求头
        postBtn.addEventListener('click', () => {
            // 这里的代码一直到 onreadystatechange 顺序执行
            const nameInput = name.value;
            const xhr = new XMLHttpRequest();
            // 确定请求发送目标
            xhr.open("POST", "http://192.168.22.24:4000/test_json");
            // send 发送的操作，会把头部一起发送出去
            // 所以要在send之前设置头部
            // 设置头部 application/json: 告诉后端，我向你发送的数据，是个 JSON 格式
            xhr.setRequestHeader("content-type", "application/json");
            // 发送
            const nameObj = { name: nameInput };
            // JSON.stringify 转换对象为 JSON 字符串
            const transObj = JSON.stringify(nameObj);
            xhr.send(transObj);
            // 监听请求返回事件
            // readyState 变化，才会运行，函数的调用由浏览器，在请求状态发生变化的时候，执行
            // 可以把 onreadystatechange 和 readyState 一起看
            // 设置服务器返回给我们的数据结构
            xhr.responseType = 'json'
            xhr.onreadystatechange = () => {
                // 只有在 readyState === 4 的时候，是请求返回的时候
                if (xhr.readyState === 4) {
                    // 判断服务器返回是否成功
                    if (xhr.status === 200) {
                        // 设置了返回结构，直接拿 xhr.response 就可以了
                        // 如果xhr.responseType === 'json', xhr.responce对象
                        // xhr 会自动处理返回数据
                        // 如果没有设置 responseType = 'json', 从responseText 拿数据
                        console.log(xhr.response)
                        postResult.innerHTML = xhr.response
                        // 成功
                    } else {
                        // 失败
                    }
                }
            };
        });
    </script>
</body>

</html>